<template>
  <div class="box" :style="{ backgroundImage: 'url(' + url + ')' }"></div>
</template>
  <script>
export default {
  name: "header",
  props: {
    url: {
      type: String,
      default: function () {
        return "";
      },
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

  <style scoped>
.box {
  margin: 0 auto;
  width: 1302px;
  height: 780px;
  /* 其他样式设置，比如背景尺寸、重复等 */
  background-size: 100% 80%; /* 让背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
}
</style>
